<!-- 
	This is the sign in page, it uses the dashboard layout in: 
	"./layouts/Default.vue" .
 -->

<template>
	<div class="sign-in animate__animated animate__fadeIn">
		
		<a-row type="flex" :gutter="[24,24]" justify="space-around" align="middle">

			<!-- Sign In Form Column -->
			<a-col :span="24" :md="12" :lg="{span: 12, offset: 0}" :xl="{span: 12, offset: 0}" class="col-form" style="margin-top: 150px">
				<h1 class="mb-15">激活账号</h1>
				<h5 class="font-regular text-muted">我们已将激活验证码发送至您的邮箱，请您查看并激活账号</h5>

				<!-- Sign In Form -->
				<a-form
					id="components-form-demo-normal-login"
					:form="form"
					class="login-form"
					@submit="handleSubmit"
					:hideRequiredMark="true"
				>
					<a-form-item class="mb-10" label="激活验证码" :colon="false">
						<a-input 
						v-decorator="[
						'activeCode',
						{ rules: [{ required: true, message: '请输入验证码！' }] },
						]" placeholder="请输入验证码" style="width: 200px"/>
					</a-form-item>


					<a-form-item>
						<a-button type="primary" block html-type="submit" class="login-form-button"
            style="width: 100px">
							激活账号
						</a-button>
					</a-form-item>
				</a-form>
				<!-- / Sign In Form -->

				<p class="font-semibold text-muted">没有账号？ <router-link to="/sign-up" class="font-bold text-dark">请注册</router-link></p>
			</a-col>
			<!-- / Sign In Form Column -->


			<!-- Sign In Image Column -->

		</a-row>
		
	</div>
</template>

<script>

	export default ({
		data() {
			return {
				// Binded model property for "Sign In Form" switch button for "Remember Me" .
				rememberMe: true,
        email: '',
			}
		},
		beforeCreate() {
			// Creates the form and adds to it component's "form" property.
			this.form = this.$form.createForm(this, { name: 'normal_login' });
		},
		methods: {
      openPage(path) {
        this.$router.push({
          path: path
        })
      },
			// Handles input validation after submission.
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFields((err, values) => {
					if ( !err ) {
						console.log('Received values of form: ', values) ;
            this.$axios({
              headers: {
                "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
              },
              url: "/api/user/activeUser",
              method: "POST",
              params:{
                email: this.email,
                activeCode: values.activeCode

              }
            }).then(response => {
              console.log(response.data)
              if (response.data.status === 0) {
                console.log(response.data.token)
                swal("恭喜", "您已成功注册!", "success")
                    .then((cli) => {
                      if (cli) {
                        this.openPage('/sing-in')
                      }else {
                        this.openPage('/sing-in')
                      }
                    })
              }else if (response.data.status === 10){
                swal("已存在该邮箱", "请您直接登录!", "warning")
              }else if (response.data.status === 8){
                swal("错误", response.data.msg,"warning")
              }
            });
					}
				});
			},
      backHistory(){
        this.$router.go(-1);
      }
		},
    mounted() {

    },
    created() {
      if (this.$route.query.email !== undefined) {
        // console.log(this.$route.query.email)
        this.email = this.$route.query.email
      }else {
        swal("非法请求","","warning")
        .then((e) => {
          this.backHistory();
        })
      }
    }
  })

</script>

<style lang="scss">
	body {
		background-color: #ffffff;
	}
</style>